{include file="public/header" /}
<body>
<div class="layui-card">
    <div class="layui-card-body">
        <div class="layui-tab-content">
            <blockquote class="layui-elem-quote">
                带 <span class="x-red">*</span> 为必填项<br>
                分配权限时，请将所选权限的父级权限也选中
            </blockquote>
            <!--内容区-->
            <form id="formData" class="layui-form layui-form-pane" autocomplete="off">
                <input type="hidden" name="id" value="{$info.id}">
                <div class="layui-form-item">
                    <label class="layui-form-label layui-required">名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" value="{$info.name}" placeholder="请输入名称" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">状态</label>
                    <div class="layui-input-block">
                        <input type="checkbox" {if $info.status == 1} checked {/if} name="status" lay-text="启用|禁用" lay-skin="switch">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">角色权限</label>
                    <div class="layui-input-block">
                        &nbsp;&nbsp;
                        <button id="checkAll" type="button" class="layui-btn layui-btn-sm layui-btn-normal">全选</button>
                        <button id="cancelCheckAll" type="button" class="layui-btn layui-btn-sm layui-btn-normal">全不选</button>
                        <button id="expandAll" type="button" class="layui-btn layui-btn-sm layui-btn-normal">展开全部</button>
                        <button id="unExpandAll" type="button" class="layui-btn layui-btn-sm layui-btn-normal">收起全部</button>
                        <div id="ruleArea" lay-filter="eleTree" class="eleTree ele1"></div>
                    </div>
                    <input type="hidden" name="checked_list" id="checkedList">
                </div>

                <div class="btn-block">
                    <button lay-submit lay-filter="sendForm" class="layui-btn layui-btn-normal"><i class="fa fa-check"></i>提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary"><i class="fa fa-refresh"></i>重置</button>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
<style>
    .err-focus:focus{
        border-color: red !important;
    }
</style>
<script>
    var nodeIds = [];
    var checkNode = [];
    var notCheckNode = [];
    layui.config({
        base: '../../static/js/'
    }).use(['form','eleTree'],function () {
        var $ = layui.jquery,
            form = layui.form,
            eleTree = layui.eleTree;

        var tree = eleTree.render({
            elem:'#ruleArea',
            method:'post',
            url:"{:url('rule/treeList')}",
            request:{
                name:'name',
                children:'_child',
            },
            response:{
                statusCode:'suc',
            },
            showCheckbox: true,//节点是否可被选择 默认 false
            showLine:true,//是否显示连线 默认false
            // defaultCheckedKeys:[22,56],//默认勾选的节点
            // accordion:false,//每次是否只展开一个节点 默认false
            defaultExpandAll:true,// *重要* 是否默认展开所有节点 默认false  一定要默认展开，否则获取不到子级选中
            indent:100,//相邻级节点间的水平缩进，单位为像素
            checkStrictly:true,// *重要* 在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false
            done:function (res) {
            //数据请求完成的回调函数，只有异步请求才会有
                nodeIds = res.ids;
                $.ajax({
                    type:"POST",
                    data:{id:'{$info.id}'},
                    url:"{:url('role/nodeList')}",
                    dataType: 'JSON',
                    success:function (data) {
                        tree.setChecked(data.data,true)
                    }
                })
            }

        });

        //全选
        $("#checkAll").click(function () {
            tree.setChecked(nodeIds);
            checkNode = nodeIds
        });
        //全不选
        $("#cancelCheckAll").click(function () {
            tree.unCheckNodes();
            checkNode = [];
        });
        //全部展开
        $("#expandAll").click(function () {
            tree.expandAll();
        });
        //全部收起
        $("#unExpandAll").click(function () {
            tree.unExpandAll();
        });

        //监听选中权限节点
        eleTree.on("nodeChecked(eleTree)",function (d) {
            let currentData = d.data.currentData
            if (d.isChecked == true){
                checkNode.push(currentData)
            } else {
                notCheckNode.push(currentData)
            }
        })

        form.on('submit(sendForm)',function (data) {
            let check = tree.getChecked(false,true)

            let checkList = [];
            for (var i=0;i<check.length;i++){
                checkList.push(check[i].id)
            }
            checkList = JSON.stringify(checkList)

            let sendData = {
                id:data.field.id,
                name:data.field.name,
                status:data.field.status,
                checked_list:checkList
            };
            //弹出遮罩层，防止多次点击
            var roleEditLoad = layer.load(1,{shade:[0.5,'#FFF'],time:0})
            ajaxRequest("{:url('role/edit')}",sendData,function (res) {
                if (res.code == 'suc'){
                    layer.msg(res.msg,{time:msgShowTime,icon:icoSuc},function () {
                        //刷新父级页面
                        xadmin.father_reload()
                        //关闭遮罩层
                        layer.close(roleEditLoad)
                        //关闭当前弹出层
                        xadmin.close()
                    })
                }else {
                    errMsg(res.msg,function () {
                        //关闭遮罩层
                        layer.close(roleEditLoad)
                    })
                }
            })

            return false;
        })
    });

</script>
</html>